import BoxItem from '@/components/BoxItem'
import { Button, Form, Select, Input, Space, Row, Col, Tag, Flex } from 'antd'
import { useState } from 'react'
import CustomTable from '../components/CustomTable'

const { Option } = Select

export default function SalesInbound() {
    const [inboundType, setInboundType] = useState<string>('全部')
    const [inboundStatus, setInboundStatus] = useState<string>('全部')
    const [unit, setUnit] = useState<string>('')  // 来往单位输入框

    // 入库类型选项
    const inboundTypeOptions = ['全部', '采购入库', '销售退货入库', '调拨入库']
    // 入库状态选项
    const inboundStatusOptions = ['全部', '待入库', '部分入库', '已入库']

    // 处理选择入库类型
    const handleInboundTypeChange = (value: string) => {
        setInboundType(value)
    }

    // 处理选择入库状态
    const handleInboundStatusChange = (value: string) => {
        setInboundStatus(value)
    }

    // 搜索操作
    const handleSearch = () => {
        console.log('搜索：', { unit, inboundType, inboundStatus })
    }

    // 重置操作
    const handleReset = () => {
        setUnit('')
        setInboundType('全部')
        setInboundStatus('全部')
    }

    const columns = [
        {
            title: '单据编码',
            dataIndex: 'documentCode',
            key: 'documentCode',
        },
        {
            title: '往来单位',  // 修改为往来单位
            dataIndex: 'unit',
            key: 'unit',
        },
        {
            title: '入库类型',  // 修改为入库类型
            dataIndex: 'inboundType',
            key: 'inboundType',
        },
        {
            title: '入库仓库',  // 修改为入库仓库
            dataIndex: 'warehouse',
            key: 'warehouse',
        },
        {
            title: '预计入库量',  // 修改为预计入库量
            dataIndex: 'expectedInboundQuantity',
            key: 'expectedInboundQuantity',
            render: (quantity: number) => `${quantity}`, // 格式化数量
        },
        {
            title: '实际入库量',  // 修改为实际入库量
            dataIndex: 'actualInboundQuantity',
            key: 'actualInboundQuantity',
            render: (quantity: number) => `${quantity}`, // 格式化数量
        },
        {
            title: '入库状态',  // 修改为入库状态
            dataIndex: 'inboundStatus',
            key: 'inboundStatus',
            render: (status: string) => {
                let color = 'green';  // 默认颜色
                switch (status) {
                    case '待入库':
                        color = 'cyan';
                        break;
                    case '部分入库':
                        color = 'orange';
                        break;
                    case '已入库':
                        color = 'green';
                        break;
                    default:
                        color = 'gray';
                }
                return <Tag color={color}>{status}</Tag>;
            },
        },
        {
            title: '入库时间',  // 修改为入库时间
            dataIndex: 'inboundTime',
            key: 'inboundTime',
            render: (time: string) => time ? new Date(time).toLocaleString() : '-',  // 格式化入库时间
        },
        {
            title: '备注',
            dataIndex: 'remark',
            key: 'remark',
            render: (remark: string) => remark || '-',  // 如果备注为空，显示'-'
        },
        {
            title: '操作',
            key: 'action',
            render: (record: any) => (
                <Space size="middle">
                    <Button onClick={() => console.log(`Edit ${record.documentCode}`)}>编辑</Button>
                    <Button danger onClick={() => console.log(`Delete ${record.documentCode}`)}>删除</Button>
                </Space>
            ),
        },
    ];

    const data = [
        {
            key: '1',
            documentCode: 'DOC001',
            unit: '公司A',
            inboundType: '销售入库',
            warehouse: '仓库A',
            expectedInboundQuantity: 100,
            actualInboundQuantity: 100,
            inboundStatus: '已入库',
            inboundTime: '2024-10-01T10:00:00Z',
            remark: '急需入货',
        },
        {
            key: '2',
            documentCode: 'DOC002',
            unit: '公司B',
            inboundType: '采购退货入库',
            warehouse: '仓库B',
            expectedInboundQuantity: 50,
            actualInboundQuantity: 40,
            inboundStatus: '部分入库',
            inboundTime: '2024-10-05T11:30:00Z',
            remark: '订单问题',
        },
        {
            key: '3',
            documentCode: 'DOC003',
            unit: '公司C',
            inboundType: '调拨入库',
            warehouse: '仓库C',
            expectedInboundQuantity: 200,
            actualInboundQuantity: 200,
            inboundStatus: '已入库',
            inboundTime: '2024-10-10T14:00:00Z',
            remark: '',
        },
        {
            key: '4',
            documentCode: 'DOC004',
            unit: '公司D',
            inboundType: '销售入库',
            warehouse: '仓库D',
            expectedInboundQuantity: 150,
            actualInboundQuantity: 150,
            inboundStatus: '已入库',
            inboundTime: '2024-10-15T09:00:00Z',
            remark: '客户要求加急',
        },
        {
            key: '5',
            documentCode: 'DOC005',
            unit: '公司E',
            inboundType: '采购退货入库',
            warehouse: '仓库E',
            expectedInboundQuantity: 70,
            actualInboundQuantity: 50,
            inboundStatus: '部分入库',
            inboundTime: '2024-10-20T12:00:00Z',
        },
        {
            key: '6',
            documentCode: 'DOC006',
            unit: '公司F',
            inboundType: '调拨入库',
            warehouse: '仓库F',
            expectedInboundQuantity: 120,
            actualInboundQuantity: 120,
            inboundStatus: '已入库',
            inboundTime: '2024-10-25T15:00:00Z',
            remark: '客户取消订单',
        },
        {
            key: '7',
            documentCode: 'DOC007',
            unit: '公司G',
            inboundType: '销售入库',
            warehouse: '仓库G',
            expectedInboundQuantity: 500,
            actualInboundQuantity: 450,
            inboundStatus: '待入库',
            inboundTime: '2024-10-30T08:00:00Z',
            remark: '客户要求修改',
        },
    ];

    // 状态选择器组件
    const FilterSelect = ({ label, value, onChange, options }: any) => (
        <Form.Item label={label} style={{ marginBottom: 0 }}>
            <Select value={value} onChange={onChange} placeholder={`选择${label}`} style={{ width: 160 }}>
                {options.map((option: any) => (
                    <Option key={option} value={option}>
                        {option}
                    </Option>
                ))}
            </Select>
        </Form.Item>
    );

    return (
        <div>
            <BoxItem>
                <Space size="middle">
                    <Button>导入</Button>
                    <Button>导出</Button>
                </Space>
            </BoxItem>

            <BoxItem>
                {/* 使用 Form 来构建表单 */}
                <Form layout="inline">
                    <Row gutter={16} justify="start">
                        {/* 来往单位输入框 */}
                        <Col>
                            <Form.Item label="来往单位">
                                <Input
                                    value={unit}
                                    onChange={(e) => setUnit(e.target.value)}
                                    placeholder="请输入来往单位"
                                    style={{ width: 220 }}
                                />
                            </Form.Item>
                        </Col>

                        {/* 入库类型选择框 */}
                        <Col>
                            <FilterSelect
                                label="入库类型"
                                value={inboundType}
                                onChange={handleInboundTypeChange}
                                options={inboundTypeOptions}
                            />
                        </Col>

                        {/* 入库状态选择框 */}
                        <Col>
                            <FilterSelect
                                label="入库状态"
                                value={inboundStatus}
                                onChange={handleInboundStatusChange}
                                options={inboundStatusOptions}
                            />
                        </Col>

                        {/* 搜索和重置按钮 */}
                        <Flex>
                            <Button type="primary" onClick={handleSearch}> 搜索 </Button>
                            <Button onClick={handleReset}>重置</Button>
                        </Flex>
                    </Row>
                </Form>
            </BoxItem>

            <BoxItem>
                <CustomTable
                    dataSource={data}
                    columns={columns}
                    rowKey="key"
                    pagination={true}
                />
            </BoxItem>
        </div>
    )
}
